After removing an array object I expect the flatlist to update but it fails until I reload the app. Is there a way to get the update in real time?
My code:
...imports...
arr = [
{id:1, name:'test1'},
{id:2, name:'test2'},
{id:3, name:'test3'},
]
export default function App() {
const [posts, setPosts] = useState([])
setTimeout(() => { delBet() }, 8000)
function delBet() {
try {
arr.splice(arr[2], 1); setPosts(arr)
//only remove {id:3, name:'test3'},
console.log(arr) //works well
//only show [{id:1, name:'test1'},{id:2, name:'test2'}]
} catch (e) { console.log(e) }
}
return (
<FlatList
data={posts}
extraData={posts} //doesn't work/make any difference
renderItem={({ item }) =>
<Post
post={item}
/>
}
/>
)
}
I'd appreciate any kind of help (including improving my code)
Your state is mutated,
try
setPosts([...arr]); instead of setPosts(arr);
The actual value of posts is [], if you need try to initialize the posts with the arr value, Just like this:
const [posts, setPosts] = useState(arr)
Additionally you can use setTimeout inside a use effect for render just once.
useEffect(()=> {
setTimeout(() => { delBet() }, 8000)
function delBet() {
try {
setPosts(() => arr.splice(arr[2], 1))
} catch (e) { console.log(e) }
}
}, [])